<template>
    <div class="rightBodyContent">
      <div class="rightBodyContent-in">
      <div class="hearder-search mb-10">
          <el-button type="primary" @click.native="addFoodCate" size="small">添加围观类目</el-button>
      </div>
      <!--本体列表，数据 -->
      <div class="table-body">
        <div class="table-body-box">
          <el-table
                  ref="multipleTable"
                  :data="arryList"
                  :stripe="tableoption.tableStripe"
                  :border="tableoption.tableBorder"
                  tooltip-effect="dark"
                  style="width: 100%"
                  header-cell-class-name="table-text-c"
                  cell-class-name="table-text-c">
            <el-table-column
                    prop="name"
                    label="类目名称">
            </el-table-column>
            <el-table-column
                    label="操作"
                    width="250">
              <template slot-scope="scope">
                <el-button size="small" @click="editFoodCate(scope.row)">编辑</el-button>
                <el-button type="danger" size="small" @click="detelFoodCate(scope.row)" plain>删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
      <!--工具条 分页-->
      <el-col :span="24" class="toolbar">
        <el-pagination
                background
                :page-size="page.pagesize"
                :current-page="page.pageindex"
                layout="total, prev, pager, next"
                :total="page.total"
                @current-change="handleSizeChange"></el-pagination>
      </el-col>
      <!--添加，编辑菜品类目-->
      <SpectatorsClass :visible.sync="dialogImgVisible" @initPage="InitFn" :cateId="cateId"></SpectatorsClass>
    </div>
    </div>
  </template>

  <script>
    import SpectatorsClass from '@/components/dialog/SpectatorsClass.vue'
    import api from '@/utils/api.js'
    import {pagination, tableoption, yeartime} from '@/utils/util.js'
    import {show_category_index,show_category_delete} from "@/api/admin/school"

    export default {
      components: {
        SpectatorsClass
      },
      data () {
        return {
          tableoption: tableoption,
          page: {
            pageindex: pagination.pageIndex,
            pagesize: pagination.pageSize,
            total: pagination.total
          },
          arryList: [], // 数据列表
          // 弹窗
          dialogImgVisible: false,
          cateId: null
        }
      },
      created () {
        this.InitFn()
      },
      methods: {
        // 初始化
        InitFn () {
          show_category_index({p: this.page.pageindex}).then(response=>{
            if (!response.code) {
              this.arryList = response.list.data
              this.page.total = response.list.total
            } else {
            }
          })
        },
        // 分页
        handleSizeChange (val) {
          this.page.pageindex = val
          this.InitFn()
        },
        // 删除
        detelFoodCate (row) {
          let this_ = this
          this.$confirm('确认删除该类目, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            closeOnClickModal: false,
            type: 'warning'
          }).then(() => {
            return show_category_delete({id:row.id})
          }).then(() => {
            this_.InitFn()
          }).catch(() => {
          })
        },
        // 编辑
        editFoodCate (row) {
          this.cateId = row.id
          this.dialogImgVisible = true
        },
        addFoodCate () {
          this.cateId = 0
          this.dialogImgVisible = true
        }
      },
      mounted () {
      }
    }
  </script>

